<template>
  <el-descriptions :column="2" size="large" class="td-item">
    <el-descriptions-item label-class-name="right-align" label='填报人'>
      <span class="text--info subtext">{{projectInfo.inputUserName}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label='填报单位'>
      <span class="text--info subtext">{{projectInfo.inputDeptName}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label='填报月份'>
      <span class="text--info subtext">{{projectInfo.inputDate}}</span>
    </el-descriptions-item>

    <el-descriptions-item label-class-name="right-align" label='填报类型'>
      <span class="text--info subtext" v-if='projectInfo.fillCategory == 1'>项目类</span>
      <span class="text--info subtext" v-if='projectInfo.fillCategory == 2'>非项目类</span>
    </el-descriptions-item>

    <template v-if='projectInfo.fillCategory == 1'>
      <el-descriptions-item label-class-name="right-align" label='填报项目'>
        <span class="text--info subtext">{{projectInfo.projectName}}</span>
      </el-descriptions-item>

      <el-descriptions-item label-class-name="right-align" label='项目编号'>
        <span class="text--info subtext">{{projectInfo?.projectCode}}</span>
      </el-descriptions-item>
    </template>

    <template v-else>
      <el-descriptions-item label-class-name="right-align" label='填报事项说明'>
        <span class="text--info subtext">{{projectInfo?.ext1}}</span>
      </el-descriptions-item>
    </template>
  </el-descriptions>

  <el-table
    :data="projectInfo?.data"
    border
    style="width: 100%;margin-top: 20px;"
    :header-cell-style="{ background: '#eef1f6', color: '#606266' }"
  >
    <el-table-column prop="subject" align="center" label="经费类别">
    </el-table-column>
    <el-table-column
      prop="spendAmount"
      label="总预算（万元，人民币）"
      align="center"
    >
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { onMounted, ref, watch } from "vue";
const props = defineProps({
  projectInfo: {
    type: Object
  },
});
let info = ref({});
onMounted(() => {
  info.value = props.projectInfo;
});

watch(
  () => props.projectInfo,
  newvalue => {
    info.value = newvalue;
  },
  { immediate: true }
);

</script>

<style lang="scss" scoped>
  .file-wrap{
    display: inline-block;
    vertical-align: top
  }
</style>
